<template>
	<div class="m-steps-area">
		<div class="m-steps">
			<div
				v-for="(item, index) in totalSteps"
				:key="item"
				:class="[
					'm-steps-item',
					{
						finished: current > index || (status == '1' && current === index),
						process: current === index && current + 1 !== totalSteps.length,
						'middle-wait': current < index && index + 1 !== totalSteps.length,
						'last-wait': current < index && index + 1 === totalSteps.length,
						'last-success': status == '1' && current === index && current + 1 == totalSteps.length,
						'last-process': current === index && current + 1 == totalSteps.length && status == '0',
					},
				]"
			>
				<div class="m-info-wrap">
					<div class="m-steps-icon">
						<span v-if="current < index || (current == index && status == '0')" class="u-icon">{{ index + 1 }}</span>
						<svg v-else aria-hidden="true" class="u-icon" data-icon="check" focusable="false" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" /></svg>
					</div>
					<div class="m-steps-content">
						<div class="u-steps-title">{{ item.operStatus }}</div>
						<div v-show="item.operStatus && contentStatus" class="u-steps-description">
							<div class="desc">操作：{{ item.operation }}</div>
							<div class="desc">时间：{{ item.operTime || '暂无' }}</div>
							<div v-if="item.operUser" class="desc link">
								操作人：
								<!-- <Tooltip background-color="#FFF" color="rgba(0, 0, 0, 0.7)" :max-width="240">
									<template #title>
										<div v-if="item.deptName">单位：{{ item.deptName }}</div>
										<div v-if="item.email">邮箱：{{ item.email }}</div>
										<div v-if="item.phone">电话：{{ item.phone }}</div>
									</template>
									<span class="el-dropdown-link">
										{{ item.operUser || '--' }}
									</span>
								</Tooltip> -->
							</div>
							<div v-else class="desc link">
								<template v-if="item.operStatus != '已归档'">操作人：--</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default defineComponent({
	name: 'Steps',
	props: {
		steps: {
			type: Object,
			default: () => {
				return {}
			},
		},
		contentStatus: {
			// 内容显示与否
			type: Boolean,
			default: false,
		},
		totalWidth: {
			// 步骤条总宽度
			type: Number,
			default: 900,
		},
		descMaxWidth: {
			// 描述文本最大宽度
			type: Number,
			default: 140,
		},
	},
	setup(props) {
		const state = reactive({
			current: '',
			steps: {},
			totalSteps: [],
			status: '',
		})
		watch(
			() => props.steps,
			value => ((state.steps = value), (state.current = Number(state.steps.curStep)), (state.totalSteps = state.steps.flowPathList), (state.status = state.steps.status)),
			{ immediate: true, deep: true }
		)
		onMounted(() => {
			/**
       *
       * {
          "curStep": "4",
          "status": "1",
          "flowPathList": [
              {
                  "operStatus": "已审批",
                  "operation": "审批完成",
                  "operId": null,
                  "operTime": "2023-06-29 00:00:00",
                  "operUser": "无名1",
                  "phone": "",
                  "email": "",
                  "deptName": null
              },
              {
                  "operStatus": "已认领",
                  "operation": "认领完成",
                  "operId": null,
                  "operTime": "2023-06-30 00:00:00",
                  "operUser": "无名1",
                  "phone": "",
                  "email": "",
                  "deptName": null
              },
              {
                  "operStatus": "已反馈",
                  "operation": "反馈完成",
                  "operId": null,
                  "operTime": "2023-07-01 00:00:00",
                  "operUser": "无名1",
                  "phone": "",
                  "email": "",
                  "deptName": null
              },
              {
                  "operStatus": "已复测",
                  "operation": "复测完成",
                  "operId": null,
                  "operTime": "2023-07-02 00:00:00",
                  "operUser": "无名1",
                  "phone": "",
                  "email": "",
                  "deptName": null
              },
              {
                  "operStatus": "已归档",
                  "operation": "归档完成",
                  "operId": null,
                  "operTime": "2023-07-04 00:00:00",
                  "operUser": "无名1",
                  "phone": "",
                  "email": "",
                  "deptName": null
              }
          ]
      }
       *
       */
		})
		return {
			...toRefs(state),
		}
	},
})
</script>
<style lang="scss" scoped>
.m-steps-area {
	margin: 0px auto;
	.m-steps {
		padding: 16px 0;
		display: flex;
		overflow-x: auto;
		margin-bottom: 10px;
		.m-steps-item {
			display: inline-block;
			overflow: hidden;
			font-size: 16px;
			line-height: 32px;
			min-width: 180px;
			&:not(:last-child) {
				margin-right: 16px;
				flex: 1; // 弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
			}
			.m-info-wrap {
				display: flex;
				align-items: baseline;
				.m-steps-icon {
					display: inline-block;
					margin-right: 8px;
					width: 24px !important;
					height: 24px !important;
					border-radius: 50%;
					text-align: center;
					line-height: 24px;
				}
				.m-steps-content {
					display: inline-block;
					flex: 1;
					.u-steps-title {
						position: relative;
						display: inline-block;
						padding-right: 16px;
					}
					.u-steps-description {
						font-size: 14px;
						word-wrap: break-word;
					}
				}
			}
			.desc {
				color: #999;
				font-size: 12px !important;
				line-height: 22px;
				.el-dropdown-link {
					cursor: pointer;
					font-size: 12px;
					color: #0052cc;
				}
			}
		}
		.u-tail {
			background: #e8e8e8;
			position: absolute;
			top: 16px;
			left: 100%;
			display: block;
			width: 3000px;
			height: 1px;
			content: '';
		}
		.finished {
			.m-steps-icon {
				background: #fff;
				border: 1px solid #0052cc;
				border-color: #0052cc;
				.u-icon {
					fill: #0052cc;
					width: 12px;
					height: 12px;
					vertical-align: top;
					margin-top: 6px;
				}
			}
			.m-steps-content {
				color: rgba(0, 0, 0, 0.65);
				.u-steps-title {
					color: rgba(0, 0, 0, 0.65);
					&:after {
						position: absolute;
						top: 16px;
						left: 100%;
						display: block;
						width: 3000px;
						height: 1px;
						content: '';
						background: #0052cc;
					}
				}
				.u-steps-description {
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}
		.process {
			.m-steps-icon {
				background: #0052cc;
				border: 1px solid #0052cc;
				border-color: #0052cc;
				.u-icon {
					color: #fff;
					font-size: 15px;
				}
			}
			.m-steps-content {
				color: rgba(0, 0, 0, 0.65);
				.u-steps-title {
					font-weight: 500;
					color: #0052cc;
					&:after {
						background: #dcdfe6;
						position: absolute;
						top: 16px;
						left: 100%;
						display: block;
						width: 3000px;
						height: 1px;
						content: '';
					}
				}
				.u-steps-description {
					color: rgba(0, 0, 0, 0.65);
				}
			}
		}
		.last-process {
			.m-steps-icon {
				border: 1px solid#dcdfe6 !important;
				.u-icon {
					color: #303133 !important;
					font-size: 15px;
				}
			}
			.m-steps-content {
				color: #303133 !important;
				.u-steps-title {
					font-weight: 600;
					color: #303133 !important;
				}
				.u-steps-description {
					color: #303133 !important;
				}
			}
			.desc {
				color: #303133 !important;
			}
		}
		.last-success {
			.u-steps-title {
				&:after {
					display: none !important;
				}
			}
		}
		.middle-wait {
			.m-steps-icon {
				background: #fff;
				border: 1px solid #a8abb2;
				color: #a8abb2;
				.u-icon {
					color: #a8abb2;
					font-size: 15px;
				}
			}
			.m-steps-content {
				color: rgba(0, 0, 0, 0.65);
				.u-steps-title {
					color: rgba(0, 0, 0, 0.45);
					&:after {
						background: #e8e8e8;
						position: absolute;
						top: 16px;
						left: 100%;
						display: block;
						width: 3000px;
						height: 1px;
						content: '';
					}
				}
				.u-steps-description {
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}
		.last-wait {
			margin-right: 0;
			.m-steps-icon {
				background: #fff;
				border: 1px solid rgba(0, 0, 0, 0.25);
				.u-icon {
					color: rgba(0, 0, 0, 0.25);
					font-size: 15px;
				}
			}
			.m-steps-content {
				color: rgba(0, 0, 0, 0.65);
				.u-steps-title {
					color: rgba(0, 0, 0, 0.45);
				}
				.u-steps-description {
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}
	}
}
</style>
